<template>
  <cl-dialog title="修改预约时间" width="600px" :visible.sync="visible" @close="close" :props="{
    beforeClose: beforeClose,
    appendToBody: true,
    closeOnClickModal: false
  }">
    <el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="是否预约到店" prop="appoint_arrive" required>
            <el-radio-group v-model="form.appoint_arrive" @change="appointArriveChange">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="新客/老客" prop="cus_type">
            <el-radio-group v-model="cus_type"">
							<el-radio :label="2">老客</el-radio>
              <el-radio :label="1">新客</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <template v-if="form.appoint_arrive">
          <el-col :span="12">
            <el-form-item label="预约时长" prop="cart_duration">
              <cart-duration v-model="form.cart_duration" style="width: 100%" :disabled="this.cart_duration_disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约城市" prop="city_id">
              <cl-select v-model="form.city_id" placeholder="请选择" filterable clearable disabled style="width: 100%">
                <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
              </cl-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约门店" prop="dept_id">
              <cl-shop-select v-model="form.dept_id" placeholder="请选择预约门店" filterable style="width: 100%" disabled
                only-open :biz_id="form.biz_id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="appoint_time" label="预约时间">
              <div class="flex flex-center">
                <el-input v-model="form.appoint_time" type="text" placeholder="请填写预约时间" disabled>
                </el-input>
                <el-button type="primary" size="mini" @click="onSelectTime">选择预约时间</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="未成交原因" prop="cause">
              <cl-select v-model="form.cause" placeholder="请选择未成交原因" style="width: 100%">
                <el-option label="售前原因" :value="1" />
                <el-option label="售中原因" :value="2" />
                <el-option label="门店原因" :value="3" />
                <el-option label="客户原因" :value="4" />
              </cl-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="原因描述(可附最多五张张图,图片非必传)" prop="detail">
              <el-input v-model="form.detail" placeholder="请填定原因" type="textarea" :rows="3"
                style="margin-bottom: 15px" />
              <cl-upload multiple :limit="5" :limit-size="5" list-type="picture-card" ref="uploads" v-model="images"
                :on-success="onUploadSuccess" />
            </el-form-item>
          </el-col>
        </template>
        <template v-else>
          <div>
            <el-col :span="24">
              <el-form-item label="未成交原因" prop="cause">
                <cl-select v-model="form.cause" placeholder="请选择未成交原因" style="width: 100%">
                  <el-option label="售前原因" :value="1" />
                  <el-option label="售中原因" :value="2" />
                  <el-option label="门店原因" :value="3" />
                  <el-option label="客户原因" :value="4" />
                </cl-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="原因描述(可附最多五张张图,图片非必传)" prop="detail">
                <el-input v-model="form.detail" placeholder="请填定原因" type="textarea" :rows="3"
                  style="margin-bottom: 15px" />
                <cl-upload multiple :limit="5" :limit-size="5" list-type="picture-card" ref="uploads" v-model="images"
                  :on-success="onUploadSuccess" />
              </el-form-item>
            </el-col>
          </div>
        </template>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" :loading="saving" @click="submit">确定</el-button>
    </template>
    <!-- <van-popup v-model="showTimePop" position="bottom">
      <van-datetime-picker
   
      @cancel="showTimePop = false"
      @confirm="confirmTimePicker"
  v-model="mobile_appoint_time"
  type="datetime"
  title="选择预约时间"
/></van-popup> -->
  </cl-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { computed } from 'vue'
import CartDuration from "@/components/cart-duration.vue";
// import { cityList } from "@/assets/countryLevel3";
import dayjs from "dayjs";

export default {
  name: "modify-cart-time",
  components: {
    CartDuration
  },
  inject: ["$layout"],
  computed: {
    ...mapGetters(["browser"])
  },
  data() {
    return {
      cityList: [],
      visible: false,
      saving: false,
      images: [],
      form: {
        biz_id: "",
        dept_id: "",
        cart_id: "",
        cus_id: "",
        appoint_time: "",
        appoint_date: "",
        appoint_btime: "",
        appoint_arrive: 0,
        cart_duration: "",
        city_id: "",
        cause: "",
        detail: "",
        bed: 0,
      },
      cus_type: 0,
      rules: {
        dept_id: [{ required: true, message: "请选择预约门店" }],
        appoint_time: [{ required: true, message: "请选择预约时间" }],
        cart_duration: [{ required: true, message: "请选择预约时长" }],
        city_id: [{ required: true, message: "请选择预约城市" }]
        // cause: [{ required: true, message: "请选择未到店原因", trigger: "change" }],
        // detail: [{ required: true, message: "请填写原因", trigger: "change" }]
      },
      cart_duration_disabled: false,
      showTimePop: false,
      mobile_appoint_time: ''
    };
  },
  methods: {
    open(data = {}) {
      console.log("data", data);
      this.visible = true;
      // this.form = { ...data };
      Object.keys(this.form).forEach(key => {
        this.form[key] = data[key] ?? "";
      });
      this.cus_type = data.cus_type;
      this.form.appoint_arrive = 1;
      this.form.appoint_time = data.appoint_date;
      this.images = [];
      console.info("data", this.form);
      this.getCityList();
      this.getDeptInfo();
    },
    close() {
      this.visible = false;
    },
    beforeClose(done) {
      !this.saving && done();
      this.$refs.form.resetFields();
    },
    submit() {
      this.$refs.form.validate(async (valid, errors) => {
        this.showFormErr(errors);
        if (!valid) return;
        // 添加判断是否是手机端
        // if(this.browser.isMobile)this.form.appoint_date=dayjs(this.mobile_appoint_time).format("YYYY-MM-DD")
        this.saving = true;
        const { appoint_date } = this.form;
        this.form.cus_type = this.cus_type
        const query = {
          ...this.form,
          appoint_date: dayjs(appoint_date).format("YYYY-MM-DD"),
          update_type: 2,
          images: this.images.length ? this.images.toString(",") : this.images.toString(",")
        };
        console.log(query, 'query');

        if (appoint_date == "待定时间") {
          await this.$service.cart
            .update({
              ...this.form,
              appoint_date: "",
              update_type: 2,
              images: this.images.length ? this.images.toString(",") : this.images.toString(",")
            })
            .done(() => {
              this.saving = false;
            });
        } else {
          await this.$service.cart.update(query).done(() => {
            this.saving = false;
          });
        }

        this.$message.success("操作成功");
        this.$emit("confirm");
        this.close();
      });
    },
    appointArriveChange() {
      // this.form.cart_duration = "";
      // this.form.appoint_date = "";
      // this.form.appoint_btime = "";
    },
    // 选择预约时间
    onSelectTime() {
      const { biz_id, dept_id, cart_duration, city_id, appoint_info = {} } = this.form;
      const { cus_type } = this;
      const params = {
        biz_id: biz_id,
        dept_id: dept_id,
        cart_duration: cart_duration,
        city_id: city_id,
        cus_type
      };
      this.$layout.openAppointBoard(
        params,
        "选择预约时间",
        "selectTime",
        this.selectTimeCall
      );
      // }

    },
    confirmTimePicker() {
      this.form.appoint_time = dayjs(this.mobile_appoint_time).format("YYYY-MM-DD HH:mm")
      this.form.appoint_date = dayjs(this.mobile_appoint_time).format("YYYY-MM-DD");
      this.form.appoint_btime = dayjs(this.mobile_appoint_time).format("HH:mm")
      this.showTimePop = false
    },
    selectTimeCall(data = null) {
      if (!data) return false;
      console.info("data", data);

      this.form.city_id = data.city_id;
      this.form.dept_id = data.dept_id;
      this.form.appoint_time = data.appoint_time;
      this.form.appoint_date = data.appoint_date;
      this.form.appoint_btime = data.appoint_btime;
      this.form.bed = data.bed;
      if (data.cart_duration > 0) {
        this.cart_duration_disabled = true;
        this.form.cart_duration = data.cart_duration;
      }
      else {
        this.cart_duration_disabled = false;
      }
    },
    onUploadSuccess() { },
    async getCityList() {
      const { biz_id } = this.form;
      this.$service.ad.citylists({ biz_id }).then(data => {
        let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
        this.cityList = list;
      });
    },
    async getDeptInfo() {
      const { dept_id } = this.form;
      this.$service.dept.getDeptInfo({ dept_id }).then(data => {
        if (data.cart_duration > 0) {
          this.form.cart_duration = data.cart_duration
          this.cart_duration_disabled = true;
        }
      })
    }
  }
};
</script>
